<template>
  <div class="app-container-flex" :class="{'app-container': !isDialog}">
    <div class="tree-contain">
      <p class="tree-title">
        依赖分析
        [ <span class="title-sub">{{detail.url || url}}</span> ]
      </p>
      <p class="tree-brief">
        服务节点：<span class="tnf">{{detail.appNum}}</span>&nbsp;&nbsp;
        深度：<span class="tnf">{{detail.depth}}</span>&nbsp;&nbsp;
        租户：<span class="tnf">{{detail.tenantId}}</span>
      </p>
      <div class="tree">
        <el-tree
          :props="treeProps"
          :data='treeData'
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
        >
          <span
            class="tree-item"
            slot-scope="{ node, data }"
            @click="handleTreeNode(data)"
          >
            <span class="tree-item-main" :class="{error: data.tags === 'Error'}">{{node.label}}</span>
            <span class="tree-item-apk">
              <span class="apk-left" :title="data.method">{{data.method}}</span>
              /{{data.duration}}ms</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="detail-contain">
      <dynamic-table
        ref="table"
        size="small"
        :data="list"
        border
        fit
        style="width: 100%;"
        :columns="columns"
      ></dynamic-table>
    </div>
  </div>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
import {getCallChainDetailLog} from '@/api/log-trace'
import {SERVER_REQ_STATUS} from '@/enume/status'
export default {
  name: 'CallChainDetail',
  components: { DynamicTable },
  props: {
    topTraceId: String,
    query: {
      type: Object,
      default() {
        return {
          url: '',
          topTraceId: ''
        }
      }
    },
    isDialog: Boolean
  },
  data() {
    let self = this
    return {
      list: [],
      treeData: [],
      detail: {}, // 明细
      treeProps: {
        children: 'child',
        label: 'appName'
      },
      url: '',
      columns: [[
        {
          prop: 'appName',
          label: '服务节点',
          width: 140,
          body(scope) {
            return {
              component: 'TypeButton',
              bind: {
                name: scope.row.appName,
                type: 'text',
                size: 'small'
              },
              on: {
                click() {
                  self.handleTreeNode(scope.row)
                }
              }
            }
          }
        }, {
          prop: 'ip',
          label: '地址',
          width: 100
        }, {
          prop: 'method',
          label: '方法',
          minWidth: 100,
          body(scope) {
            return {
              component: 'TypeButton',
              bind: {
                name: scope.row.method,
                type: 'text',
                size: 'small'
              },
              on: {
                click() {
                  self.handleTreeNode(scope.row)
                }
              }
            }
          }
        }, {
          prop: 'args',
          label: '参数',
          width: 100
        }, {
          prop: 'result',
          label: '结果',
          width: 100
        }, {
          prop: 'startTime',
          label: '到达时间',
          width: 120,
          format: 'date'
        }, {
          prop: 'endTime',
          label: '结束时间',
          width: 120,
          format: 'date'
        }, {
          prop: 'duration',
          label: '耗时',
          width: 40
        }, {
          prop: 'tags',
          label: '状态',
          width: 60,
          align: 'center',
          body(scope) {
            let obj = SERVER_REQ_STATUS.filter(el => el.value === scope.row.tags)[0] || {}
            return {
              component: 'TypeTag',
              bind: {
                type: obj.style,
                size: 'small',
                name: obj.label
              }
            }
          }
        }
      ]]
    }
  },
  created() {
    if (!this.isDialog) {
      this.url = decodeURIComponent(this.$route.query.url)
      this.getDetail(this.$route.query.topTraceId)
    } else {
      this.url = this.query.url
      this.getDetail(this.query.topTraceId)
    }
  },
  methods: {
    /**
     * 获取明细
     */
    getDetail(topTraceId) {
      return getCallChainDetailLog({topTraceId}).then(({data}) => {
        if (!data) return
        this.detail = data
        this.treeData = [data.callChainDetailAppLog]
        this.list = this.tranceToTableList([data.callChainDetailAppLog])
      }, res => {})
    },
    tranceToTableList(nodes, arr = []) { // 转换为表格渲染数据
      nodes.forEach(node => {
        let obj = {...node}
        delete obj.child
        arr.push(obj)
        if (node.child) {
          this.tranceToTableList(node.child, arr)
        }
      })
      return arr
    },
    handleTreeNode(node) { // 点树节点
      // this.list = this.tranceToTableList([node])
      this.$router.push({path: '/log-trace/business', query: {traceId: node.traceId}})
    }
  }
}
</script>
<style lang="scss" scoped>

.error {
  color: red;
}
.app-container-flex {
  display: flex;
}
.tree-contain {
  width: 400px;
  padding-right: 15px;
  border-right: solid 1px #ccc;
  .tree-title {
    font-size: 14px;
    .title-sub {
      font-size: 12px;
      max-width: 280px;
      color: #999;
      line-height: 18px;
      height: 18px;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .tree-brief {
    font-size: 13px;
    margin: 15px 0;
    color: #666;
    .tnf {
      color: #1890FF
    }
  }
  .tree {
    border-top: solid 1px #ccc;
    padding-top: 10px;
    .tree-item {
      flex: 1;
      display: flex;
      font-size: 14px;
      .tree-item-main {
        display: block;
        flex: 1;
      }
      .tree-item-apk {
        font-size: 12px;
        color: #999;
        display: block;
        .apk-left {
          display: inline-block;
          max-width: 100px;
          height: 16px;
          line-height: 16px;
          vertical-align: middle;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.detail-contain {
  flex: 1;
  min-width: 600px;
  padding-left: 15px;
}
</style>
